<template>
  <!-- 递归子组件 -->
  <div class="box">
    <!-- 最底层内容 -->
    <!-- 递归显示组件 -->
    <parent
      @parentCallReply="diguiCallReply"
      :parentDepth="parentDepth-1"
      :parentData="parentData.parent"
      v-if="parentData.parent"
    ></parent>
    <div class="layer">
      <!-- 沙发信息 -->
      <div class="info">
        <div class="user">
          <!-- 楼层深度 -->
          {{parentDepth}}
          <!-- 图片 -->
          <img src="@/assets/3.png" alt />
          <!-- 昵称 -->
          <div class="nickname">{{parentData.user.nickname}}</div>
          <!-- 时间 -->
          <div class="date">{{parentData.create_date.split('T')[0]}}</div>
        </div>
        <!-- 回复 -->
        <div class="huifu" @click="parentCallReply">回复</div>
      </div>
      <!-- 最外层文字内容 -->
      {{parentData.content}}
    </div>
  </div>
</template>

<script>
export default {
  props: ["parentData", "parentDepth"],
  name: "parent",
  methods: {
    parentCallReply() {
      this.$emit("parentCallReply", {
        id: this.parentData.id,
        nickname: this.parentData.user.nickname
      });
      console.log(this.parentData.id);
      console.log(this.parentData.user.nickname);
    },
    diguiCallReply(parentInfo) {
      this.$emit("parentCallReply", parentInfo);
      console.log("回复递归");

      console.log(parentInfo);
    }
  }
};
</script>

<style lang="less" scoped>
//递归元素样式
.box {
  .layer {
    padding: 3.333vw;
    border: 1px solid #ccc;
    margin: 0 0 -0.278vw -0.278vw;

    //沙发信息
    .info {
      display: flex;
      align-items: center;
      font-size: 3.333vw;
      color: #666;
      //用户
      .user {
        padding: 4.444vw 0;
        display: flex;
        align-items: center;
        flex: 1;
        //图片
        img {
          padding-left: 10px;
          padding-right: 1.667vw;
          width: 8.333vw;
          height: 8.333vw;
        }
        //昵称
        .nickname {
          padding-right: 1.667vw;
          font-size: 3.889vw;
        }
        //时间
        .date {
          font-size: 3.333vw;
          color: #aaa;
        }
        //回复
        .huifu {
          font-size: 3.333vw;
          color: #aaa;
        }
      }
    }
  }
}
</style>